<template>
  <div class="app-content-wrap" :style="'minHeight:' + gHeight + 'px;'">
    <div class="g-content-title">
      部门管理
      <div class="department-top-btn">
        <a class="btn-default" @click="addStreet">新增街道</a>
        <a class="btn-default" :href="downloadAddress" download>下载全部</a>
        <a class="btn-default" @click="uploadDevice">批量上传</a>
        <a class="btn-default" href="resource/部门模板.xlsx" download>下载模板</a>
      </div>
    </div>
    <div class="tree_grid_tree_table">
      <el-table :data="data" border style="width: 100%" :row-style="showTr">
        <el-table-column v-for="(column, index) in columns" :key="column.dataIndex" :label="column.text" :align="column.align">
          <template slot-scope="scope">
            <template v-if="spaceIconShow(index)">
              <span v-for="(space, levelIndex) in scope.row._level" :key="levelIndex" class="ms-tree-space"></span>
            </template>
            <button class="arrow-button" v-if="toggleIconShow(index, scope.row)" @click="toggle(scope.$index, $event)">
              <i v-if="!scope.row._expanded" class="el-icon-arrow-right" aria-hidden="true"></i>
              <i v-else-if="scope.row._expanded" class="el-icon-arrow-down" aria-hidden="true"></i>
            </button>
            <span v-else-if="index === 0" class="ms-tree-space"></span>
            {{ scope.row[column.dataIndex] }}
          </template>
        </el-table-column>

        <el-table-column label="操作" v-if="treeType === 'normal'" width="200" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row._level < 2" type="text" icon @click="handleAdd(scope.$index, scope.row)">新增</el-button>
            <span v-else class="icon-seize-seat"></span>
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="text" v-if="scope.row.deptState === '正常'" @click="handleFrozen(scope.$index, scope.row)" icon="iconfont icon-lock2">冻结</el-button>
            <el-button type="text" v-else @click="handleOpen(scope.$index, scope.row)" icon="iconfont icon-unlock">开启</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1000px">
      <el-form :label-position="labelPosition" label-width="130px" :model="ruleForm" :rules="rules" ref="ruleForm" size="small">
        <el-form-item label="选择社区/楼宇" v-if="this.deptLv === 2">
          <el-radio v-model="ruleForm.deptType" :label="0">社区</el-radio>
          <el-radio v-model="ruleForm.deptType" :label="1">楼宇</el-radio>
        </el-form-item>
        <el-form-item :label="labelName" prop="name" required="required">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="系统名称" prop="systemName" v-show="this.deptLv === 2">
          <el-input v-model="ruleForm.systemName"></el-input>
        </el-form-item>
        <el-form-item label="小区Logo" prop="systemLogo" v-show="this.deptLv === 2">
          <!-- <el-input v-model="ruleForm.systemLogo"></el-input> -->
          <el-col :span="19" class="upload-box upload-input">
            <el-input placeholder="选择Logo图" type="text" v-model="this.logoUploadAdd"></el-input>
            <input type="file" ref="uploadLogoInput" class="file" @change="handleSelectLogo" />
          </el-col>
          <el-col :span="5">
            <el-button class="el-button el-button--primary el-button--small el-col-24" @click.native="handleLogoUpload">上传</el-button>
          </el-col>
        </el-form-item>

        <el-form-item class="img-box" label v-show="hasUploadLogo && this.deptLv === 2">
          <div class="img-item">
            <img :src="imgLogoData" alt />
            <div class="del-but">
              <el-button @click="
                  dialogImageUrl = imgLogoData
                  innerVisible = true
                " icon="el-icon-zoom-in"></el-button>
              <el-button @click.native="handleDelLogoImage()" icon="el-icon-delete"></el-button>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="小区图片" prop="imageWall" v-if="this.deptLv === 2">
          <div class="label-star">*</div>
          <el-col :span="19" class="upload-box upload-input">
            <el-input placeholder="选择图片" type="text" v-model="this.imageUploadAdd"></el-input>
            <input type="file" ref="uploadFileInput" multiple="multiple" class="file" @change="handleExceed" />
          </el-col>
          <el-col :span="5">
            <el-button class="el-button el-button--primary el-button--small el-col-24" :disabled="uploadState" @click.native="handleUpload">上传</el-button>
          </el-col>
        </el-form-item>

        <el-form-item class="img-box" label v-show="
            ruleForm.banner &&
              ruleForm.banner.result &&
              ruleForm.banner.result.length > 0 &&
              this.deptLv === 2
          ">
          <div class="img-item" v-for="(item, index) in ruleForm.banner.result" :key="index">
            <img :src="item.imgUrl" alt />
            <div class="del-but">
              <el-button @click="
                  dialogImageUrl = item.imgUrl
                  innerVisible = true
                " icon="el-icon-zoom-in"></el-button>
              <el-button @click.native="handleDelImage(item)" icon="el-icon-delete"></el-button>
            </div>
          </div>
        </el-form-item>
        <el-row :gutter="15" class="input_gps" v-if="this.deptLv === 2">
          <el-col :span="8">
            <el-form-item prop="lng" label="经度、纬度">
              <el-input v-model="ruleForm.lng"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="item-inline" prop="lat" label-width="80px">
              <el-input v-model="ruleForm.lat"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="item-inline-left" :span="2">
            <el-button type="text" icon="el-icon-location" @click="showMap">选择地图位置</el-button>
          </el-col>
          <el-col :span="8">
            <el-form-item class="charge-main" prop="chargeMenuFlag" label-width="140px" label="显示电瓶车管理">
              <el-switch v-model="ruleForm.chargeMenuFlag" active-color="#13ce66" inactive-color="#A1A1A1" active-value="1" inactive-value="0" class="charge-menu-flag"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="this.deptLv !== 2">
          <el-col :span="8">
            <el-form-item class="charge-main" prop="chargeMenuFlag" label-width="140px" label="显示电瓶车管理">
              <el-switch v-model="ruleForm.chargeMenuFlag" active-color="#13ce66" inactive-color="#A1A1A1" active-value="1" inactive-value="0" class="charge-menu-flag"></el-switch>
            </el-form-item>
          </el-col>
        </div>
        <div v-show="this.deptLv === 2">
          <div style="height: 20px;"></div>
          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item label="外来租户数" prop="temporaryPeopleCount">
                <el-input v-model="ruleForm.temporaryPeopleCount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="常住人口" prop="permanentPeopleCount">
                <el-input v-model="ruleForm.permanentPeopleCount"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item label="机动车停车位数" prop="autoParkCount">
                <el-input v-model="ruleForm.autoParkCount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="非机动车停车位数" prop="bikeParkCount">
                <el-input v-model="ruleForm.bikeParkCount"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item label="注册的机动车数" prop="registerCarCount">
                <el-input v-model="ruleForm.registerCarCount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册的自行车数" prop="registerBikeCount">
                <el-input v-model="ruleForm.registerBikeCount"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item label="消防栓数目" prop="fireHydrantCount">
                <el-input v-model="ruleForm.fireHydrantCount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电梯数目" prop="elevatorCount">
                <el-input v-model="ruleForm.elevatorCount"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item label="摄像头数" prop="fireHydrantCount">
                <el-input v-model="ruleForm.camaraCount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="常驻商户" prop="fireHydrantCount">
                <el-input v-model="ruleForm.permanentMerchantCount"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click.native="cancledialog()" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('ruleForm')" size="small">确 定</el-button>
      </span>
      <el-dialog :visible.sync="innerVisible" append-to-body>
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
    </el-dialog>
    <el-dialog title="上传" :visible.sync="dialogUploadVisible" width="40%" :before-close="handleUploadClose">
      <el-form ref="form" label-width="80px">
        <div class="file-upload-box">
          <label>模板上传</label>
          <div class="form-item-content">
            <input v-model="uploadPath" class="text-input" />
            <input class="file-input" type="file" @change="uploadFileEvent" />
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogUploadVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click.native="dialogSubmit" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog top="0" custom-class="pic-popup" :visible.sync="mapVisible">
      <mapSelect :LngLat="lngLat" :MapClick="mapClick"></mapSelect>
    </el-dialog>
  </div>
</template>
<script>
import Utils from '../utils/index.js'
import mapSelect from '../../../../components/common/ui/mapSelect'

export default {
  name: 'tree-grid',
  components: {
    mapSelect
  },
  props: {
    // 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
    treeStructure: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    // 这是相应的字段展示
    columns: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 这是数据源
    dataSource: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 这个作用是根据自己需求来的，比如在操作中涉及相关按钮编辑，删除等，需要向服务端发送请求，则可以把url传过来
    requestUrl: {
      type: String,
      default: function () {
        return ''
      }
    },
    // 这个是是否展示操作列
    treeType: {
      type: String,
      default: function () {
        return 'normal'
      }
    },
    // 是否默认展开所有树
    defaultExpandAll: {
      type: Boolean,
      default: function () {
        return false
      }
    }
  },
  data: function () {
    let checkName = (rule, value, callback) => {
      let _rulesName = this.$store.state.department.rulesName
      if (!value) {
        return callback(new Error(_rulesName + '不能为空'))
      }
      setTimeout(() => {
        callback()
      }, 1000)
    }
    let checkPhone = (rule, value, callback) => {
      if (value === '') {
        callback()
      } else {
        if (/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/.test(value) === false) {
          callback(new Error('请输入正确的手机号码或者固定电话！'))
        } else {
          callback()
        }
      }
    }
    let checkEmail = (rule, value, callback) => {
      if (value === '') {
        callback()
      } else {
        if (!/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(value)) {
          callback(new Error('请输入正确的邮箱号码！'))
        } else {
          callback()
        }
      }
    }
    let checkNumber = (rule, value, callback) => {
      if (value) {
        if (/^[0-9]*$/.test(value) === false) {
          callback(new Error('请输入数字！'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    let checkImageWall = (rule, value, callback) => {
      if (
        !this.ruleForm.banner.result ||
        this.ruleForm.banner.result.length < 1
      ) {
        callback(new Error('小区图片不能为空'))
      } else {
        callback()
      }
    }
    return {
      gHeight: this.$store.state.gHeight,
      title: '',
      labelName: '',
      labelPosition: 'right',
      ruleForm: {
        name: '',
        address: '',
        lng: '',
        lat: '',
        phone: '',
        email: '',
        deptType: '', // 0社区 1楼宇
        chargeMenuFlag: '', // 是否显示充电桩菜单
        temporaryPeopleCount: '',
        permanentPeopleCount: '',
        autoParkCount: '',
        bikeParkCount: '',
        registerCarCount: '',
        registerBikeCount: '',
        fireHydrantCount: '',
        elevatorCount: '',
        camaraCount: '',
        permanentMerchantCount: '',
        systemName: '',
        systemLogo: '',
        banner: {
          result: []
        }
      },
      deptId: '',
      supDeptId: 0,
      deptState: 1, // 设备状态 0冻结 1正常
      isState: 0, // 0新增 1修改
      deptLv: '', // 等级
      dialogVisible: false, // 添加街道、小区、部门状态
      dialogUploadVisible: false, // 模板上传状态
      downloadAddress: '', // xlsx下载地址
      uploadPath: '', // 当前上传附件的路径
      uploadFileObj: '', // 当前上传附件的对象
      uploadFileLogoObj: '', // 当前上传Logo图的对象
      tempDeptState: 0, // 显示正常和冻结的状态
      dataUpdateState: false, // 更新数据过后的状态
      mapVisible: false, // 地图是否显示
      mapClick: true, // 地图标注点是否可切换
      lngLat: {
        lng: 121.423224,
        lat: 31.223914
      }, // 地图标注点的位置
      rules: {
        name: [{
          validator: checkName,
          trigger: ['change', 'blur']
        }],
        phone: [{
          validator: checkPhone,
          trigger: 'blur'
        }],
        email: [{
          validator: checkEmail,
          trigger: 'blur'
        }],
        temporaryPeopleCount: [{
          validator: checkNumber,
          trigger: 'blur'
        }],
        permanentPeopleCount: [{
          validator: checkNumber,
          trigger: 'blur'
        }],
        autoParkCount: [{
          validator: checkNumber,
          trigger: 'blur'
        }],
        bikeParkCount: [{
          validator: checkNumber,
          trigger: 'blur'
        }],
        registerCarCount: [{
          validator: checkNumber,
          trigger: 'blur'
        }],
        registerBikeCount: [{
          validator: checkNumber,
          trigger: 'blur'
        }],
        fireHydrantCount: [{
          validator: checkNumber,
          trigger: 'blur'
        }],
        elevatorCount: [{
          validator: checkNumber,
          trigger: 'blur'
        }],
        camaraCount: [{
          validator: checkNumber,
          trigger: 'blur'
        }],
        permanentMerchantCount: [{
          validator: checkNumber,
          trigger: 'blur'
        }],
        imageWall: [{
          validator: checkImageWall,
          trigger: 'change'
        }],
        lng: [{
          required: true,
          message: '经度不能为空',
          trigger: ['blur']
        }],
        lat: [{
          required: true,
          message: '纬度不能为空',
          trigger: ['blur']
        }]
      },
      uploadState: true, // 上传图片是否开启
      // uploadLogoState: true, // 上传Logo是否开启
      uploadNum: 5, // 上传图片的最大数量
      nums: 0, // 上传图片张数
      uploadArr: [], // 上传图片的状态
      imgData: {
        result: [],
        code: 0
      }, // 图片展示数据
      imgLogoData: '',
      imageUploadAdd: '', // 选择的图片地址
      logoUploadAdd: '', // 选择的logo图片
      imageWallUrl: '', // 小区图片图片地址
      innerVisible: false,
      dialogImageUrl: '',
      hasUploadLogo: false // 是否已经上传照片
    }
  },
  computed: {
    // 格式化数据源
    data: function () {
      let me = this
      if (me.treeStructure) {
        return Utils.MSDataTransfer.treeToArray(
          me.dataSource,
          null,
          null,
          me.defaultExpandAll
        )
      }
      return me.dataSource
    },
    pointData () {
      return this.$store.state.event.pointData
    },
    pointPopShow () {
      return this.$store.state.event.pointPopShow
    }
  },
  watch: {
    pointData: {
      handler (curVal) {
        this.ruleForm.lng = curVal.lng
        this.ruleForm.lat = curVal.lat
      },
      deep: true
    },
    pointPopShow: {
      handler (curVal) {
        this.mapVisible = curVal
      },
      deep: true
    },
    'ruleForm.lng': {
      handler (curVal) {
        this.lngLat.lng = curVal
        this.lngLat.lat = this.ruleForm.lat
      }
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      this.downloadAddress =
        this.$base.getUrl('downloadDept') +
        '?token=' +
        this.$base.getSessionStorage('token')
    })
  },
  methods: {
    // 显示行
    showTr (row) {
      let show = row.row._parent
        ? row.row._parent._expanded && row.row._parent._show
        : true
      row.row._show = true
      return show ? '' : 'display:none'
    },
    // 展开下级
    toggle (trIndex, event) {
      let me = this
      let record = me.data[trIndex]
      record._expanded = !record._expanded
      if (record._expanded === false && trIndex === 0) {
        record.nodes.forEach(element => {
          element._expanded = false
        })
      }
    },
    // 显示层级关系的空格和图标
    spaceIconShow (index) {
      let me = this
      if (me.treeStructure && index === 0) {
        return true
      }
      return false
    },
    // 点击展开和关闭的时候，图标的切换
    toggleIconShow (index, record) {
      let me = this
      return (
        me.treeStructure &&
        index === 0 &&
        record.nodes &&
        record.nodes.length > 0
      )
    },
    // 新增按钮(小区、部门)
    handleAdd (index, row) {
      this.clearValue()
      this.dialogVisible = true
      this.uploadFileObj = ''
      this.uploadState = true
      if (row._level === 0) {
        this.title = '新增小区'
        this.labelName = '小区名称'
        this.$store.commit('setRulesNameData', '小区名称')
        this.supDeptId = row.deptId
        this.deptLv = 2
        // 外来租户数
        this.ruleForm.temporaryPeopleCount = ''
        // 常住人口
        this.ruleForm.permanentPeopleCount = ''
        // 机动车停车位数
        this.ruleForm.autoParkCount = ''
        // 非机动车停车位数
        this.ruleForm.bikeParkCount = ''
        // 注册的机动车数
        this.ruleForm.registerCarCount = ''
        // 注册的自行车数
        this.ruleForm.registerBikeCount = ''
        // 消防栓数目
        this.ruleForm.fireHydrantCount = ''
        // 电梯数目
        this.ruleForm.elevatorCount = ''
        // 摄像头数
        this.ruleForm.camaraCount = ''
        // 常驻商户
        this.ruleForm.permanentMerchantCount = ''
        this.ruleForm.lat = ''
        this.ruleForm.lng = ''
        // 系统名称
        this.ruleForm.systemName = ''
        this.ruleForm.systemLogo = ''
        // 小区徽章
        this.ruleForm.banner.result = []
      } else if (row._level === 1) {
        this.title = '新增部门'
        this.labelName = '部门名称'
        this.$store.commit('setRulesNameData', '部门名称')
        this.supDeptId = row.deptId
        this.deptLv = 3
      }
      // 电瓶车管理控制
      this.ruleForm.chargeMenuFlag = ''
      this.deptState = 1
      this.isState = 0
      this.imageUploadAdd = ''
    },
    // 编辑按钮(街道、小区、部门)
    handleEdit (index, row) {
      this.dialogVisible = true
      this.uploadFileObj = ''
      this.uploadState = true
      if (row.deptState === '正常') {
        this.tempDeptState = 1
      } else {
        this.tempDeptState = 0
      }
      if (row._level === 0) {
        this.title = '编辑街道'
        this.labelName = '街道名称'
        this.$store.commit('setRulesNameData', '街道名称')
        this.deptLv = row.deptLv
      } else if (row._level === 1) {
        // console.log(row)
        this.title = '编辑小区'
        this.labelName = '小区名称'
        this.$store.commit('setRulesNameData', '小区名称')
        this.deptLv = row.deptLv
        this.ruleForm.deptId = row.deptId
        this.ruleForm.deptType = row.deptType

        // 外来租户数
        this.ruleForm.temporaryPeopleCount = row.temporaryPeopleCount
        // 常住人口
        this.ruleForm.permanentPeopleCount = row.permanentPeopleCount
        // 机动车停车位数
        this.ruleForm.autoParkCount = row.autoParkCount
        // 非机动车停车位数
        this.ruleForm.bikeParkCount = row.bikeParkCount
        // 注册的机动车数
        this.ruleForm.registerCarCount = row.registerCarCount
        // 注册的自行车数
        this.ruleForm.registerBikeCount = row.registerBikeCount
        // 消防栓数目
        this.ruleForm.fireHydrantCount = row.fireHydrantCount
        // 电梯数目
        this.ruleForm.elevatorCount = row.elevatorCount
        // 摄像头数目
        this.ruleForm.camaraCount = row.camaraCount
        // 常驻商户
        this.ruleForm.permanentMerchantCount = row.permanentMerchantCount
        // 系统名称
        this.ruleForm.systemName = row.systemName
        this.ruleForm.lat = row.gpsLat
        this.ruleForm.lng = row.gpsLng

        let logoUrl = row.logoImage ? JSON.parse(row.logoImage) : null
        if (logoUrl) {
          this.hasUploadLogo = true
          this.imgLogoData = logoUrl
        } else {
          this.logoUploadAdd = ''
          this.hasUploadLogo = false
          this.imgLogoData = ''
        }
        // 小区徽章
        if (typeof row.banner === 'undefined') {
          this.ruleForm.banner.result = []
        } else {
          // this.ruleForm.banner = JSON.parse(row.banner)
          this.ruleForm.banner.result.push(row.banner)
        }
      } else if (row._level === 2) {
        this.title = '编辑部门'
        this.labelName = '部门名称'
        this.$store.commit('setRulesNameData', '部门名称')
        this.deptLv = row.deptLv
      }
      this.ruleForm.address = row.deptAddress
      this.ruleForm.email = row.deptEmail
      this.ruleForm.name = row.deptName
      this.ruleForm.phone = row.deptPhone
      if (row.chargeMenuFlag) {
        this.ruleForm.chargeMenuFlag = row.chargeMenuFlag.toString()
      } else {
        this.ruleForm.chargeMenuFlag = '0'
      }
      this.supDeptId = row.supDeptId
      this.deptState = this.tempDeptState
      this.deptId = row.deptId
      this.isState = 1
      this.imageUploadAdd = ''
    },
    // 表单提交按钮
    handleSubmit (formRule) {
      let _this = this
      _this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          // isState(0代表新增,1代表修改)
          if (_this.isState === 0) {
            let data = {
              deptId: _this.deptId,
              deptType: _this.ruleForm.deptType,
              deptAddress: _this.ruleForm.address,
              deptEmail: _this.ruleForm.email,
              deptName: _this.ruleForm.name,
              deptPhone: _this.ruleForm.phone,
              supDeptId: _this.supDeptId,
              deptLv: _this.deptLv,
              deptState: _this.deptState,
              temporaryPeopleCount: _this.ruleForm.temporaryPeopleCount,
              permanentPeopleCount: _this.ruleForm.permanentPeopleCount,
              autoParkCount: _this.ruleForm.autoParkCount,
              bikeParkCount: _this.ruleForm.bikeParkCount,
              registerCarCount: _this.ruleForm.registerCarCount,
              registerBikeCount: _this.ruleForm.registerBikeCount,
              fireHydrantCount: _this.ruleForm.fireHydrantCount,
              elevatorCount: _this.ruleForm.elevatorCount,
              camaraCount: _this.ruleForm.camaraCount,
              permanentMerchantCount: _this.ruleForm.permanentMerchantCount,
              systemName: _this.ruleForm.systemName,
              gpsLat: _this.ruleForm.lat,
              gpsLng: _this.ruleForm.lng,
              logoImage: _this.imgLogoData,
              chargeMenuFlag: _this.ruleForm.chargeMenuFlag,
              banner: JSON.stringify(_this.ruleForm.banner)
            }
            let url = _this.$base.getUrl('addDept')
            let params = {
              url: url,
              data: data
            }
            _this.$store.dispatch('postForm', params).then(res => {
              if (res.code === 0) {
                _this.dialogVisible = false
                if (_this.deptLv === 1) {
                  _this.$message({
                    type: 'success',
                    message: '新增街道成功!'
                  })
                } else if (_this.deptLv === 2) {
                  _this.$message({
                    type: 'success',
                    message: '新增小区成功!'
                  })
                } else if (_this.deptLv === 3) {
                  _this.$message({
                    type: 'success',
                    message: '新增部门成功!'
                  })
                }
                _this.dataUpdateState = true
                _this.$emit('updateStateValue', _this.dataUpdateState)
                // _this.$refs[formRule].resetFields()
              }
            })
          } else if (_this.isState === 1) {
            // isState(0代表新增,1代表修改)
            let data = {
              deptId: _this.deptId,
              deptType: _this.ruleForm.deptType,
              deptAddress: _this.ruleForm.address,
              deptEmail: _this.ruleForm.email,
              deptName: _this.ruleForm.name,
              deptPhone: _this.ruleForm.phone,
              supDeptId: _this.supDeptId,
              deptLv: _this.deptLv,
              deptState: _this.deptState,
              temporaryPeopleCount: _this.ruleForm.temporaryPeopleCount,
              permanentPeopleCount: _this.ruleForm.permanentPeopleCount,
              autoParkCount: _this.ruleForm.autoParkCount,
              bikeParkCount: _this.ruleForm.bikeParkCount,
              registerCarCount: _this.ruleForm.registerCarCount,
              registerBikeCount: _this.ruleForm.registerBikeCount,
              fireHydrantCount: _this.ruleForm.fireHydrantCount,
              elevatorCount: _this.ruleForm.elevatorCount,
              camaraCount: _this.ruleForm.camaraCount,
              permanentMerchantCount: _this.ruleForm.permanentMerchantCount,
              systemName: _this.ruleForm.systemName,
              gpsLat: _this.ruleForm.lat,
              gpsLng: _this.ruleForm.lng,
              chargeMenuFlag: _this.ruleForm.chargeMenuFlag,
              logoImage: JSON.stringify(_this.imgLogoData),
              banner: JSON.stringify(_this.ruleForm.banner)
            }
            let url = _this.$base.getUrl('updateDept')
            let params = {
              url: url,
              data: data
            }
            _this.$store.dispatch('postForm', params).then(res => {
              if (res.code === 0) {
                _this.dialogVisible = false
                _this.dataUpdateState = true
                // _this.$refs[formRule].resetFields()
                _this.$emit('updateStateValue', _this.dataUpdateState)
                if (_this.deptLv === 1) {
                  _this.$message({
                    type: 'success',
                    message: '街道修改成功!'
                  })
                } else if (_this.deptLv === 2) {
                  _this.$message({
                    type: 'success',
                    message: '小区修改成功!'
                  })
                } else if (_this.deptLv === 3) {
                  _this.$message({
                    type: 'success',
                    message: '部门修改成功!'
                  })
                }
              }
            })
          }
          // _this.clearValue()
        }
      })
    },
    // 显示地图
    showMap () {
      this.mapVisible = true
      this.$store.commit('setPointPopShow', true)
    },
    // 弹出框取消按钮
    cancledialog () {
      // this.$refs['ruleForm'].resetFields()
      this.dialogVisible = false
    },
    // 弹出框关闭按钮
    handleClose () {
      // this.$refs['ruleForm'].resetFields()
      this.dialogVisible = false
    },
    // 上传模板关闭按钮
    handleUploadClose () {
      this.dialogUploadVisible = false
    },
    // 新增街道按钮
    addStreet () {
      this.clearValue()
      this.dialogVisible = true
      this.title = '新增街道'
      this.labelName = '街道名称'
      this.$store.commit('setRulesNameData', '街道名称')
      this.supDeptId = 0
      this.isState = 0
      this.deptState = 1
      this.deptLv = 1
    },
    // 清除表单
    clearValue () {
      this.ruleForm.address = ''
      this.ruleForm.email = ''
      this.deptId = ''
      this.ruleForm.name = ''
      this.ruleForm.phone = ''
      this.supDeptId = ''
      this.ruleForm.deptId = ''
      this.ruleForm.temporaryPeopleCount = ''
      this.ruleForm.permanentPeopleCount = ''
      this.ruleForm.autoParkCount = ''
      this.ruleForm.bikeParkCount = ''
      this.ruleForm.registerCarCount = ''
      this.ruleForm.registerBikeCount = ''
      this.ruleForm.fireHydrantCount = ''
      this.ruleForm.elevatorCount = ''
      this.ruleForm.camaraCount = ''
      this.ruleForm.permanentMerchantCount = ''
      this.ruleForm.systemName = ''
      this.ruleForm.lat = ''
      this.ruleForm.lng = ''
      this.ruleForm.banner.result = []
      this.imgLogoData = ''
      this.ruleForm.chargeMenuFlag = ''
    },
    // 列表冻结按钮
    handleFrozen (index, row) {
      let that = this
      that.tempDeptState = 0
      that.deptId = row.deptId
      that.openFrozenFun(row)
    },
    // 列表开启按钮
    handleOpen (index, row) {
      let that = this
      that.tempDeptState = 1
      that.deptId = row.deptId
      that.openFrozenFun(row)
    },
    // 调取冻结或者开启接口
    setState () {
      let url = this.$base.getUrl('frozenDept')
      let data = {
        deptId: this.deptId,
        deptState: this.tempDeptState
      }
      let params = {
        url: url,
        data: data
      }
      this.$store.dispatch('postForm', params).then(res => {
        if (res.code === 0) {
          if (this.tempDeptState === 0) {
            this.$message({
              type: 'success',
              message: '冻结成功!'
            })
          } else {
            this.$message({
              type: 'success',
              message: '开启成功!'
            })
          }
          this.dataUpdateState = true
          this.$emit('updateStateValue', this.dataUpdateState)
        } else {
          this.$message({
            type: 'error',
            message: res
          })
        }
      })
    },
    // 冻结或者开启提示
    openFrozenFun (row) {
      let str = ''
      if (row.deptState === '正常') {
        str = '冻结'
        this.tempDeptState = 0
      } else {
        str = '开启'
        this.tempDeptState = 1
      }
      this.$confirm(' 是否' + str + ' ' + row.deptName, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.setState()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消' + str
          })
        })
    },
    // 上传附件按钮
    uploadDevice () {
      let that = this
      that.dialogUploadVisible = true
    },
    // 选择附件
    uploadFileEvent (e) {
      let that = this
      let files = e.target.files[0]
      let name = files.name
      that.uploadFileObj = files
      let ext = name.slice(name.lastIndexOf('.') + 1).toLowerCase()
      if (ext === 'xls' || ext === 'xlsx') {
        if (typeof files === 'undefined' || files.size <= 0) {
          that.$message.error('请选择模板!')
          return false
        } else {
          that.uploadPath = name
        }
      } else {
        that.$message.error('上传的模板文件格式错误(xls或者xlsx)!')
      }
    },
    // 上传附件提交按钮
    dialogSubmit () {
      let that = this
      let files = that.uploadFileObj
      if (files.length === 0) {
        that.$message.error('请选择模板!')
      } else {
        let name = files.name
        let ext = name.slice(name.lastIndexOf('.') + 1).toLowerCase()
        if (ext === 'xls' || ext === 'xlsx') {
          if (typeof files === 'undefined' || files.size <= 0) {
            that.$message.error('请选择模板!')
            return false
          } else {
            that.fileUploadFun(files)
          }
        } else {
          that.$message.error('上传的模板文件格式错误(xls或者xlsx)!')
        }
      }
    },
    // 上传附件接口
    fileUploadFun (fileObj) {
      let that = this
      let param = new FormData()
      param.append('file', fileObj, fileObj.name)
      let url = this.$base.getUrl('uploadDept')
      let params = {
        url: url,
        data: param
      }
      that.$store.dispatch('postUploadForm', params).then(res => {
        if (res.code === 0) {
          that.$message.success('模板上传成功！')
        } else if (res.code === 500) {
          that.$message.error(res.msg)
        }
      })
    },
    // 选择图片
    handleExceed (e) {
      let that = this
      let file = e.target.files
      that.uploadFileObj = file
      let urls = ''
      this.nums = 0
      this.uploadArr = []
      this.imgData.result = []
      let uploadedImage = this.ruleForm.banner.result.length
      if (file.length === 0) {
        this.$message.error('请选择的图片')
      } else if (file.length + uploadedImage > this.uploadNum) {
        this.$message.error('上传的图片不能超过' + this.uploadNum + '张')
      } else {
        for (let i = 0; i < file.length; i++) {
          let _name = file[i].name
          if (_name !== '') {
            let ext = _name.slice(_name.lastIndexOf('.') + 1).toLowerCase()
            if (
              ext === 'png' ||
              ext === 'jpg' ||
              ext === 'jpeg' ||
              ext === 'gif'
            ) {
              urls += _name + ','
              that.uploadState = false
            } else {
              that.$message.error('文件格式错误！')
            }
          }
        }
        urls = urls.substring(0, urls.length - 1)
        that.imageUploadAdd = urls
      }
    },
    // 选择logo图片
    handleSelectLogo (e) {
      let _this = this
      let file = e.target.files
      let urls = ''
      this.uploadFileLogoObj = file
      // this.nums = 0
      // this.uploadArr = []
      this.imgLogoData = ''
      // let uploadedImage = this.ruleForm.banner.result.length
      if (file.length === 0) {
        this.$message.error('请选择的图片')
      } else {
        let _name = file[0].name
        if (_name !== '') {
          let ext = _name.slice(_name.lastIndexOf('.') + 1).toLowerCase()
          if (
            ext === 'png' ||
            ext === 'jpg' ||
            ext === 'jpeg' ||
            ext === 'gif'
          ) {
            urls = _name
          } else {
            _this.$message.error('文件格式错误！')
          }
        }
        _this.logoUploadAdd = urls.substring(0, urls.length)
      }
    },
    // onClick上传图片
    handleUpload () {
      let that = this
      let uploadedImage = that.ruleForm.banner.result.length
      if (that.uploadState) {
        return
      }
      if (that.uploadFileObj.length) {
        if (uploadedImage + that.uploadFileObj.length === this.uploadNum) {
          this.uploadState = true
        } else if (uploadedImage + that.uploadFileObj.length > this.uploadNum) {
          this.$message.error('上传的图片不能超过' + this.uploadNum + '张')
          return
        }
        for (let i = 0; i < that.uploadFileObj.length; i++) {
          let name = that.uploadFileObj[i].name
          let ext = name.slice(name.lastIndexOf('.') + 1).toLowerCase()
          if (ext === 'png' || ext === 'jpg' || ext === 'gif') {
            if (
              typeof that.uploadFileObj[i] === 'undefined' ||
              that.uploadFileObj[i].size <= 0
            ) {
              that.$message.error('请选择图片！')
              return
            } else {
              that.imgUploadFun(that.uploadFileObj[i])
            }
          } else {
            that.$message.error('文件格式错误！')
          }
        }
      } else {
        that.$message.error('请选择图片！')
      }
    },
    // onClick上传logo图
    handleLogoUpload () {
      let _this = this
      if (_this.uploadFileLogoObj.length) {
        let name = _this.uploadFileLogoObj[0].name
        let ext = name.slice(name.lastIndexOf('.') + 1).toLowerCase()
        if (ext === 'png' || ext === 'jpg' || ext === 'gif') {
          if (
            typeof _this.uploadFileLogoObj[0] === 'undefined' ||
            _this.uploadFileLogoObj[0].size <= 0
          ) {
            _this.$message.error('请选择图片！')
          } else {
            _this.imgUploadLogoFn(_this.uploadFileLogoObj[0])
          }
        } else {
          _this.$message.error('文件格式错误！')
        }
      } else {
        _this.$message.error('请选择图片！')
      }
    },
    // 上传多张图片方法
    imgUploadFun (fileObj) {
      let that = this
      let param = new FormData()
      param.append('action', 'UploadVMKImagePath')
      param.append('multipartFile', fileObj)
      let url = this.$base.getUrl('imgUpload')
      let params = {
        url: url,
        data: param
      }
      that.$store.dispatch('postUploadForm', params).then(res => {
        if (res.code === 0) {
          let obj = {
            imgUrl: res.data.url
          }
          that.ruleForm.banner.result.push(obj)
          that.imgData.result.push(obj)
          that.uploadArr.push(true)
          that.nums = 0
          for (let j = 0; j < that.uploadArr.length; j++) {
            if (that.uploadArr[j]) {
              that.nums += 1
            }
          }
          if (that.uploadFileObj.length === that.nums) {
            // that.uploadState = false
            that.$message.success('图片上传成功！')
          }
        } else {
          that.$message.error(
            '图片上传失败，请上传后缀名为.jpg .png .gif的图片。'
          )
        }
      })
    },
    // 上传单张图片
    imgUploadLogoFn (fileObj) {
      let _this = this
      let param = new FormData()
      param.append('action', 'UploadVMKImagePath')
      param.append('multipartFile', fileObj)
      let url = this.$base.getUrl('imgUpload')
      let params = {
        url: url,
        data: param
      }
      _this.$store.dispatch('postUploadForm', params).then(res => {
        if (res.code === 0) {
          _this.hasUploadLogo = true
          _this.imgLogoData = res.data.url
          _this.$message.success('图片上传成功！')
          // }
        } else {
          _this.$message.error(
            '图片上传失败，请上传后缀名为.jpg .png .gif的图片。'
          )
        }
      })
    },
    // 删除图片
    handleDelImage (item) {
      let that = this
      let delIndex = that.ruleForm.banner.result.indexOf(item)
      if (delIndex > -1) {
        that.ruleForm.banner.result.splice(delIndex, 1)
        this.uploadState = false
      }
    },
    // 删除图片
    handleDelLogoImage (item) {
      this.imgLogoData = ''
      this.logoUploadAdd = ''
      this.hasUploadLogo = false
    }
  }
}
</script>
<style lang="less" scoped>
.g-content-title {
  position: relative;
  padding-right: 20px;

  .department-top-btn {
    float: right;

    .btn-default {
      display: inline-block;
      padding: 2px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.42857143;
      text-align: center;
      cursor: pointer;
      background: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin-left: 6px;
      text-decoration: none;
      color: #333;
    }
  }
}

.charge-main {
}

.charge-menu-flag {
  margin-left: 10px;
  // margin-top: 9px;
}

.ms-tree-space {
  position: relative;
  top: 1px;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  width: 18px;
  height: 14px;
}

.ms-tree-space::before {
  content: '';
}

table td {
  line-height: 26px;
}

.arrow-button {
  background: none;
  border: none;
  cursor: pointer;
}

.icon-seize-seat {
  display: inline-block;
  width: 40px;
  height: 23px;
}

.dialog-footer {
  padding-right: 20px;
}

/deep/ .el-dialog__body {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/deep/ .el-dialog__footer {
  padding-bottom: 30px;
}

.el-dialog__wrapper /deep/ .el-dialog__body {
  padding: 20px;
}

.el-dialog__wrapper /deep/ .el-dialog__header {
  padding: 10px 20px 10px;
}

.el-dialog__wrapper /deep/ .el-dialog__headerbtn {
  top: 10px;
}

.el-dialog__wrapper /deep/ .pic-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  margin: 0;
}

.item-inline /deep/ .el-form-item__content {
  /*margin-left: 0!important;*/
  transform: translate(-80px, 0);
}

.item-inline-left {
  transform: translate(-80px, 0);
}

.upload-input {
  padding-right: 15px;
  box-sizing: border-box;
}

.label-star {
  position: absolute;
  top: 2px;
  left: -77px;
  color: #f56c6c;
}
</style>
<style lang="less">
.tree_grid_tree_table {
  margin: 10px 20px;
}

.tree_grid_tree_table /deep/ .el-table th:nth-child(1) div {
  padding-left: 60px !important;
}

.tree_grid_tree_table /deep/ .el-table tbody td:first-child .cell {
  padding-left: 30px !important;
}

.tree_grid_tree_table /deep/ .el-icon-arrow-right::before,
.tree_grid_tree_table /deep/ .el-icon-arrow-down:before {
  font-weight: bolder;
}

.file-upload-box {
  height: 40px;
  line-height: 40px;
  position: relative;
}

.file-upload-box label {
  text-align: right;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 80px;
}

.form-item-content {
  margin-left: 80px;
  line-height: 40px;
  position: relative;
  font-size: 14px;
}

.form-item-content .text-input,
.form-item-content .file-input {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  cursor: pointer;
}

.form-item-content .file-input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 0;
}

.upload-box {
  position: relative;
}

.upload-box .file {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 33px;
}

.img-box {
  height: 100px;
}

.img-box .img-item {
  display: block;
  float: left;
  height: 100px;
  width: 100px;
  margin-right: 10px;
  display: flex;
}

.img-box .img-item img {
  height: 100px;
  width: 100px;
  border-radius: 10px;
}

.img-box .img-item .del-but {
  height: 100px;
  width: 100px;
  background-color: #3c495f;
  opacity: 0;
  position: absolute;
  text-align: center;
  border-radius: 10px;
}

.img-box .img-item .del-but:hover {
  opacity: 0.9;
}

.img-box .img-item .del-but button {
  height: 40px;
  width: 40px;
  background-color: transparent;
  border: 0px;
  margin-top: 30px;
  color: #999999;
  font-size: 20px;
  padding-left: 10px;
  margin-left: 0px;
}

.img-box .img-item .del-but button:hover {
  color: white;
}
</style>
